<template>
  <div class="sex-charts">
    <!-- 性别比例图表 -->
     <div class="title">
       <p>性别比例</p>
       <img src="../../images/dataScreen-title.png" alt="图片地址已失效">
     </div>
     <div class="sex">
      <div class="man">
        <img src="../../images/man.png" alt="图片地址已失效">
      </div>
      <div class="woman">
        <img src="../../images/woman.png" alt="图片地址已失效">
      </div>
     </div>
     <div class="rate">
      <p>男士：58%</p>
      <p>女士：42%</p>
     </div>
     <div class="rateCharts" ref="refForRateCharts"></div>
  </div>
</template>

<script lang="ts" setup name="Sex">
import { ref,onMounted } from 'vue'
import * as echarts from 'echarts'
let refForRateCharts = ref() // 获取性别比例图所在的DOM元素
onMounted(() => {
  let instanceOfEcharts = echarts.init(refForRateCharts.value) // 初始化echarts实例对象
  // 设置图表配置项↓
  instanceOfEcharts.setOption({
    title:{
      text: '性别比例',
      textStyle:{
        color: 'white',
      },
      left:'50%', // 标题居中显示（显示在容器宽度的50%处）
    },
    xAxis:{
      show:false, // 隐藏x轴
      // type:'category', // 注：这个配置项被用于设置直角坐标系中 x 轴类型是类目轴。它可以让柱状图在水平方向上均分显示各个类目（即让每一个柱子在水平方向上均分排布）
      min:0, // 设置百分比的最小值
      max:100,      
    },
    yAxis:{
      show:false, // 隐藏y轴
      type:'category', // 在y轴上均分显示每一个柱子的标签（即让每一个柱子在垂直方向上均分排布）
    },    
    series:[{
      type:'bar',
      data:[58],
      barWidth:20, // 设置柱子宽度
      z:100, // 设置柱子层级（z值越大，则该元素越靠前显示）（这个属性相当于css中的z-index）
      itemStyle:{ // 设置柱子样式    
        borderRadius:20, // 设置柱子圆角
      },
      // 表示男性的柱状图↑，表示女性的柱状图↓
    },{
      type:'bar',
      // data:[42],
      data:[100],
      barWidth:20,
      barGap:'-100%', // 设置两个柱子之间的间距为负值，从而实现让两个柱子重叠显示的效果
      itemStyle:{     
        color:'pink',
        borderRadius:20,
      },
    },],
    // 布局配置项↓
    grid:{ // 这些配置可以让图表与挂载点所在元素的宽高保持一致，从而让图表充满整个挂载点所在元素
      left:0,
      right:0,
      top:0,
      bottom:0,
    }
  })
})
</script>

<style lang="scss" scoped>
.sex-charts{
  width: 100%;
  height: 100%;
  background: url(../../images/dataScreen-main-lb.png) no-repeat;
  background-size: 100% 100%;
  margin: 20px 0px;
  .title{
    margin-left: 20px;
    p{
      color: white;
      font-size: 20px;
    }
  }
  .sex{
    display: flex;
    justify-content: center;
    .man{
      background: url(../../images/man-bg.png) no-repeat;
      margin: 20px;
      width: 111px;
      height:115px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    .woman{
      margin: 20px;
      background: url(../../images/woman-bg.png) no-repeat;      
      width: 111px;
      height:115px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  .rate{
    display: flex;
    justify-content: space-between;
    color:white
  }
  .rateCharts{
    // width: 100%;
    height: 100px;
    // background: red;
  }
}
</style>